<%@ taglib prefix="s" uri="/struts-tags" %>
<%@ taglib prefix="sx" uri="/struts-dojo-tags" %>
<script type="text/javascript" src="<s:url value="/js/jquery/jquery.collapse.js"/>"></script>
<script type="text/javascript" src="<s:url value="/js/protocol/investigator.js"/>"></script>
<script type="text/javascript" src="<s:url value="/js/protocol/site.js"/>"></script>

<script type="text/javascript" src="<s:url value="/js/protocol/siteStaff.js"/>"></script>

<br />
<h5>Sites Staff Selection</h5>
<s:if test="!list.isEmpty()">

    <div id="table_content">
        <table>
            <thead>
            <tr>
                <th>Site Name</th>
                <th>Principal</th>
                <th>Sub</th>
                <th>Edit</th>
            </tr>
            </thead>
            <tbody>
            <s:iterator value="list" var="x">
            <tr>
                <th><s:property value="protocoloCentro.centro.institucion"/></th>
                <th><s:property value="principalInvestigator.nombre"/> <s:property value="principalInvestigator.apellido"/></th>
                <th><s:property value="subInvestigator.nombre"/> <s:property value="subInvestigator.apellido"/></th>
                <th>
                    <s:form method="POST">
                        <s:url value="/images/edit.png" id="imageEdit"/>
                        <s:url value="/images/eye.png" id="imageView"/>
                        <s:hidden value="%{id.investigadorid}" name="investigadorProtocoloCentro.id.investigadorid"/>
                        <s:hidden value="%{id.protocoloCentrocentroid}" name="investigadorProtocoloCentro.id.protocoloCentrocentroid"/>
                        <s:hidden value="%{id.protocoloCentroprotocoloCompromisopaisprotocoloid}" name="investigadorProtocoloCentro.id.protocoloCentroprotocoloCompromisopaisprotocoloid"/>
                        <s:hidden value="%{id.protocoloCentroprotocoloCompromisopaiscompromisopaisid}" name="investigadorProtocoloCentro.id.protocoloCentroprotocoloCompromisopaiscompromisopaisid"/>

                        <s:submit type="image" src="%{imageEdit}" cssStyle="width: 20px;height: 20px;" value="Edit"  ></s:submit>
                    </s:form>
                </th>
            </tr>
            </s:iterator>

            <tbody>
        </table>
    </div>
</s:if>

<s:form theme="simple" style="width: 100%;">
    <table id="pic_table" class="tableFilter">
    <tbody>

        <s:url var="searchSitesURL" action="getSiteByInstitutionName"  namespace="/"/>
        <s:url var="searchPIURL" action="getInvestigatorsByNameSurname"  namespace="/Directories/Team"/>
        <s:url var="searchSIURL" action="getInvestigatorsSIByNameSurname"  namespace="/Directories/Team"/>
        <s:url var="searchComitesEticaURL" action="getComiteEticaByName"  namespace="/Directories/EthicsCommittee"/>
        <s:url var="searchInvURL" action="getInvolucradosByNameSurname"  namespace="/Directories/Team"/>

        <%--Here I hide ID info for editing--%>
        <s:hidden id="main_id_investigadorid" name="investigadorProtocoloCentro.id.investigadorid" value="%{investigadorProtocoloCentro.id.investigadorid}"/>
        <s:hidden name="investigadorProtocoloCentro.id.protocoloCentrocentroid" value="%{investigadorProtocoloCentro.id.protocoloCentrocentroid}"/>
        <s:hidden name="investigadorProtocoloCentro.id.protocoloCentroprotocoloCompromisopaisprotocoloid" value="%{investigadorProtocoloCentro.id.protocoloCentroprotocoloCompromisopaisprotocoloid}"/>
        <s:hidden name="investigadorProtocoloCentro.id.protocoloCentroprotocoloCompromisopaiscompromisopaisid" value="%{investigadorProtocoloCentro.id.protocoloCentroprotocoloCompromisopaiscompromisopaisid}"/>

        <tr>
            <td>
                <label>Site</label>
            </td>
            <td>
                <s:select name="investigadorProtocoloCentro.protocoloCentro.centro.id" id="siteId" value="%{investigadorProtocoloCentro.protocoloCentro.centro.id}"
                          headerKey="" headerValue="Choose a Site"
                          list="sites"
                          listKey="id"
                          listValue="institucion"
                          theme = "simple"
                        >
                </s:select>
            </td>
        </tr>

        <tr>
            <td><div class="div_padding"></div></td>
            <td></td>
        </tr>

        <tr>
            <td>
                <label>Principal Investigator</label>
            </td>
            <td>
                <!--It Sends PI's ID to Server-->
                <s:textfield theme="simple"
                    name="investigadorProtocoloCentro.principalInvestigator.id"
                    id="piId" readonly="true" cssClass="load_hidden"/>

                <!--search field for Involucrados-->
                <s:textfield theme="simple" id="searchPI" />
                <label id="labelRequiredPI" style="color: red">*</label>

                <%--Only for edition--%>
                <s:hidden theme="simple" id="piNombre" value="%{investigadorProtocoloCentro.principalInvestigator.nombre}"/>
                <s:hidden theme="simple" id="piApellido" value="%{investigadorProtocoloCentro.principalInvestigator.apellido}"/>
                <s:hidden theme="simple" id="piCuit" value="%{investigadorProtocoloCentro.principalInvestigator.cuit}"/>
                <s:hidden theme="simple" id="piDegree" value="%{investigadorProtocoloCentro.principalInvestigator.degree.descripcion}"/>
                <s:hidden theme="simple" id="piEmail" value="%{investigadorProtocoloCentro.principalInvestigator.email}"/>
                <s:hidden theme="simple" id="piFax" value="%{investigadorProtocoloCentro.principalInvestigator.fax}"/>
                <s:hidden theme="simple" id="piPhone" value="%{investigadorProtocoloCentro.principalInvestigator.phone}"/>

                <s:a href="#" onclick="searchInvestigator(
                                            $('#searchPI').val(),
                                            '%{searchPIURL}')"
                             theme="simple" >

                <img src="<s:url value="/images/search.png"/>" alt="search"></s:a>
            </td>
        </tr>

        <tr>
            <td></td>
            <td>
                <!--listado de investigator-->
                <div id="pi-show-hide" class="collapse" style="display: none;">
                    <h3>More Information</h3>
                    <div id="selected-pi-Information" style="margin-bottom: 25px;">
                    </div>
                </div>
        </tr>

        <tr>
            <td>
                <label>PI Current Position</label>
            </td>
            <td>
                <s:textfield theme="simple" name="investigadorProtocoloCentro.piPosition"
                                 id="piPosition" value="%{investigadorProtocoloCentro.piPosition}" />
            </td>
        </tr>

        <tr>
            <td>
                <label>PI Location in the institution</label>
            </td>
            <td>
                <s:textfield theme="simple" name="investigadorProtocoloCentro.piLocation"
                             id="piLocation"
                             value="%{investigadorProtocoloCentro.piLocation}" />
            </td>
        </tr>

        <tr><div id="div_">Area Code + Local Number</div></tr>
        <tr>
            <td style="width:200px; word-wrap: break-word;" class="formTextarea">
                PI Phone Number (24hs for informed consents) <img class="imgInfo" src="<s:url value="/images/info.png"/>"/>
            </td>
            <td>
                <s:textfield theme="simple" name="investigadorProtocoloCentro.piPhoneNumber"
                             id="piPhoneNumber"
                             value="%{investigadorProtocoloCentro.piPhoneNumber}" />
            </td>
        </tr>

        <tr>
            <td><div class="div_padding"></div></td>
            <td></td>
        </tr>

        <tr>
            <td>
                <label>Sub Investigator</label>
            </td>
            <td>
                <!--It Sends SI's ID to Server-->
                <s:textfield theme="simple"
                             name="investigadorProtocoloCentro.subInvestigator.id"
                             id="siId" readonly="true" cssClass="load_hidden"/>

                <!--search field for Involucrados-->
                <s:textfield theme="simple" id="searchSI"/>

                    <%--Only for edition--%>
                <s:hidden theme="simple" id="siNombre" value="%{investigadorProtocoloCentro.subInvestigator.nombre}"/>
                <s:hidden theme="simple" id="siApellido" value="%{investigadorProtocoloCentro.subInvestigator.apellido}"/>
                <s:hidden theme="simple" id="siCuit" value="%{investigadorProtocoloCentro.subInvestigator.cuit}"/>
                <s:hidden theme="simple" id="siDegree" value="%{investigadorProtocoloCentro.subInvestigator.degree.descripcion}"/>
                <s:hidden theme="simple" id="siEmail" value="%{investigadorProtocoloCentro.subInvestigator.email}"/>
                <s:hidden theme="simple" id="siFax" value="%{investigadorProtocoloCentro.subInvestigator.fax}"/>
                <s:hidden theme="simple" id="siPhone" value="%{investigadorProtocoloCentro.subInvestigator.phone}"/>

                <s:a href="#" onclick="searchInvestigator(
                                        $('#searchSI').val(),
                                        '%{searchSIURL}')"
                     theme="simple" >

                    <img src="<s:url value="/images/search.png"/>" alt="search"></s:a>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <!--listado de investigator-->
                <div id="si-show-hide" class="collapse" style="display: none;">
                    <h3>More Information</h3>
                    <div id="selected-si-Information" style="margin-bottom: 25px;">
                    </div>
                </div>
            </td>
        </tr>

        <tr>
            <td>
                <label>Requires Safety? (check for yes)</label>
            </td>
            <td><s:checkbox name="investigadorProtocoloCentro.subRequiresSafety"
                            value="%{investigadorProtocoloCentro.subRequiresSafety}" theme="simple" />
            </td>
        </tr>

        <tr>
            <td style="width:200px; word-wrap: break-word;" class="formTextarea">
                SI Phone Number (24hs for informed consents) <img class="imgInfo" src="<s:url value="/images/info.png"/>"/>
            </td>
            <td>
                <s:textfield theme="simple" name="investigadorProtocoloCentro.subPhoneNumber"
                             value="%{investigadorProtocoloCentro.subPhoneNumber}" />
            </td>
        </tr>

        <tr>
            <td><div class="div_padding"></div></td>
            <td></td>
        </tr>
    </tbody>

    <s:if test="%{ investigadorProtocoloCentro == null || investigadorProtocoloCentro.siteStaff.isEmpty()}">
        <tbody class="siteStaffClass">
            <tr>
                <td>
                    <label>Staff Role</label>
                </td>
                <td>
                    <s:select name="siteStaff[0].role.id" headerKey="-1" headerValue=""
                              listKey="id" listValue="descripcion" list="sitesRoles"
                              value="%{siteStaff[0].role.id}" theme="simple"
                              onchange="showHideOtherRole($(this))"/>
                </td>
            </tr>
            <tr class="load_hidden">
                <td></td>
                <td>
                    <s:textfield theme="simple"
                                 name="siteStaff[0].otherRole"
                                 value="%{siteStaff[0].otherRole}"
                            />
                </td>
            </tr>
            <tr>

                <td>
                    <label>Staff Name</label>
                </td>

                <td>
                    <s:textfield theme="simple"
                                 name="siteStaff[0].involucrado.id"
                                 readonly="true" cssClass="load_hidden"
                                 value=""/>

                    <s:textfield theme="simple" value="" />
                    <s:a href="#" onclick="searchSiteStaff(
                                            $(this).prev(),
                                            '%{searchInvURL}')"
                         theme="simple" >

                        <img src="<s:url value="/images/search.png"/>" alt="search"></s:a>
                </td>
            </tr>
            <tr>
                <td>
                    <label>Requires Safety? (check for yes)</label>
                </td>
                <td>
                    <s:checkbox name="siteStaff[0].safety"
                                value="%{investigadorProtocoloCentro.siteStaff[0].safety}" theme="simple" />
                </td>
                <%--<td>--%>
                    <%--<s:select name="siteStaffRequireSafety[0]"--%>
                              <%--headerKey="-1" headerValue="Choose an option"--%>
                              <%--listKey="id" listValue="name" list="decisions"--%>
                              <%--value="siteStaffRequireSafety[0]" theme="simple" />--%>
                <%--</td>--%>

                <td><a onclick="deleteRowSS($(this).parent().parent().parent())"><img src="<s:url value="/images/delete2.png"/>" alt="Delete"></a></td>

            </tr>
        </tbody>
    </s:if>
    <s:else>
        <s:iterator value="investigadorProtocoloCentro.siteStaff"  status="stat">
            <tbody class="siteStaffClass">
                <tr>
                    <td>
                        <label>Staff Role</label>
                    </td>
                    <td>
                        <s:select name="siteStaff[%{#stat.index}].role.id" headerKey="-1" headerValue=""
                                  listKey="id" listValue="descripcion" list="sitesRoles"
                                  value="%{investigadorProtocoloCentro.siteStaff[#stat.index].role.id}"
                                  theme="simple"
                                  onchange="showHideOtherRole($(this))"/>
                    </td>
                </tr>
                <tr class="load_hidden">
                    <td></td>
                    <td>
                        <s:textfield theme="simple"
                                     name="siteStaff[%{#stat.index}].otherRole"
                                     value="%{investigadorProtocoloCentro.siteStaff[#stat.index].otherRole}"
                                />
                    </td>
                </tr>
                <tr>
                    <td>
                        <label>Staff Name</label>
                    </td>

                    <td>
                        <s:textfield theme="simple"
                                     name="siteStaff[%{#stat.index}].involucrado.id"
                                     readonly="true" cssClass="load_hidden"
                                     value="%{investigadorProtocoloCentro.siteStaff[#stat.index].involucrado.id}"/>

                        <s:textfield theme="simple" value="%{investigadorProtocoloCentro.siteStaff[#stat.index].involucrado.nombre} %{investigadorProtocoloCentro.siteStaff[#stat.index].involucrado.apellido}"/>
                        <s:a href="#" onclick="searchSiteStaff(
                                        $(this).prev(),
                                        '%{searchInvURL}')"
                             theme="simple" >
                            <img src="<s:url value="/images/search.png"/>" alt="search"></s:a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label>Requires Safety? (check for yes)</label>
                    </td>
                    <td>
                        <s:checkbox name="siteStaff[%{#stat.index}].safety"
                                    value="%{investigadorProtocoloCentro.siteStaff[#stat.index].safety}" theme="simple" />
                    </td>
                    <%--<td>--%>
                        <%--<s:select name="siteStaffRequireSafety[%{#stat.index}]"--%>
                                  <%--headerKey="-1" headerValue="Choose an option"--%>
                                  <%--listKey="id" listValue="name" list="decisions"--%>
                                  <%--value="%{siteStaffRequireSafety[#stat.index]}" theme="simple" />--%>
                    <%--</td>--%>
                    <td><a onclick="deleteRowSS($(this).parent().parent().parent())"><img src="<s:url value="/images/delete2.png"/>" alt="Delete"></a></td>
                </tr>
            </tbody>
        </s:iterator>
    </s:else>

    <tbody>
        <tr>
            <td></td>
            <td></td>
            <td><a onclick="addRowSiteStaff($(this).parent().parent().parent().prev())"><img src="<s:url value="/images/add2.png"/>" alt="Add Row"></a></td>

        </tr>
    </tbody>

    <tbody>
        <tr>
            <td><div class="div_padding"></div></td>
            <td></td>
        </tr>

        <s:if test="!investigadorProtocoloCentro.isNew()">
            <tr>
                <td style="width:200px; word-wrap: break-word;" class="formTextarea">
                    Is there site staff that is also an EC member?
                </td>
                <td>
                    <s:select id="ECMemberSelect"
                              listKey="id" listValue="name" list="decisions"
                              name="hasECMemberLAF"
                              value="hasECMemberLAF" theme="simple"
                              onchange="showHideECMembers()"/>
                </td>
            </tr>
            <tr id="ECMemberId" class="load_hidden">
                <td>
                    <label>EC member</label>
                </td>
                <td>
                    <s:select id="ecMemberCandidatesId"
                              name="investigadorProtocoloCentro.protocoloCentro.ECMember.id"
                              value="%{investigadorProtocoloCentro.protocoloCentro.ECMember.id}"
                              headerKey="-1" headerValue="Choose a Member"
                              list="ECMemberCandidates"
                              listKey="id"
                              listValue="fullName"
                              theme = "simple"
                            >
                    </s:select>
                </td>
            </tr>

        </s:if>

        <tr>
            <td><div class="div_padding"></div></td>
            <td></td>
        </tr>

        <tr>
            <td colspan="2">

                <!--listado de cda-->
                <div id="cda-show-hide" class="collapse" style="display: none;width: 100%;">
                    <h2>Molecula Confidential Disclosure Agreement</h2>
                    <div id="selected-cda-Information" style="margin-bottom: 25px;">
                        <%--<s:include value="cdaMolecula.jsp" />--%>
                    </div>
                </div>
            </td>
        </tr>
    </tbody>

    <tbody>
        <tr>
            <td style="text-align: right;">
                <s:submit value="Save" action="save" theme="simple" onclick="return validate()"/>
            </td>
            <td>
                <s:submit value="Clear" action="main" onclick="$('#main_id_investigadorid').val('');" theme="simple"/>
            </td>
        </tr>
    </tbody>

    </table>
</s:form>

<div id="forAjax" style="display:none">

</div>

<script type="text/javascript">
    selectItemMenu("siteStaffSelection");

    //cargo los elementos con comportamiento collapse
    var ids = [["sites-show-hide",false],["pi-show-hide",false],["si-show-hide",false], ["cda-show-hide",true]];
    loadCollapse(ids);

    function loadInvestivator(index){
        var suphix = index==0?'pi':'si';
        var id = $('#'+suphix+'Id').val();
        var nombre = $('#'+suphix+'Nombre').val();
        var apellido = $('#'+suphix+'Apellido').val();
        var cuit = $('#'+suphix+'Cuit').val();
        var degree = $('#'+suphix+'Degree').val();
        var email = $('#'+suphix+'Email').val();
        var fax = $('#'+suphix+'Fax').val();
        var phone = $('#'+suphix+'Phone').val();

        var investigator = Investigator(id,nombre,apellido,cuit,degree,email,fax,phone);
        closeWindowsInvestigaror(investigator, index);
    }

    /*muestra collapses para la edicion*/
    function init(){
        $('#labelRequiredPI').hide();
        if(!$.isEmptyObject($('#main_id_investigadorid').val())){
            loadInvestivator(0);
            loadInvestivator(1);
            loadOtherSiteStaff();
            showHideECMembers();
        }
    }

    window.onload=init;

</script>